<template>
  <el-dialog :model-value="true" title="活动奖励记录" width="700" @close="emit('close')">
    <el-table :data="rewardList">
      <el-table-column property="userId" label="用户ID" align="center" />
      <el-table-column property="rewardType" label="积分" align="center" />
      <el-table-column property="rewardValue" label="经验值" align="center" />
      <el-table-column property="createTime" label="创建时间" align="center" />
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParms.pageNo"
        v-model:page-size="queryParms.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="getRewardList()"
        @current-change="getRewardList()"
      />
    </div>
    <template #footer>
      <el-button @click="emit('close')">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getActivityRewardPage } from '@/api/member/activity'
import { formatDate } from '@/utils/formatTime'
const props = defineProps<{
  activityId: number
}>()
const rewardList = ref<any[]>([])
const emit = defineEmits<{
  (e: 'close'): void
}>()
const total = ref<number>(0)
const queryParms = ref({
  pageNo: 1,
  pageSize: 10
})
const getRewardList = async () => {
  const res = await getActivityRewardPage({
    activityId: props.activityId,
    ...queryParms.value
  })
  rewardList.value = res.list.map((item) => {
    return {
      ...item,
      createTime: formatDate(item.createTime)
    }
  })
  total.value = res.total
}
onMounted(() => {
  getRewardList()
})
</script>

<style scoped lang="scss">
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
